<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<style type="text/css">
			html {
				height: 100%;
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}

			#mapPage{
				height: 100%;
				position: relative;
			}

			#container {
				height: 100%
			}

			.conter{
				width: 30%;
				height: 60px;
				line-height: 60px;
				/* 毛玻璃效果 */
				background: rgba( 255, 255, 255, 0.20 );
				box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
				backdrop-filter: blur( 4.5px );
				-webkit-backdrop-filter: blur( 4.5px );
				border-radius: 10px;
				border: 1px solid rgba( 255, 255, 255, 0.18 );
				position: absolute;
				right: 6px;
				text-align: center;
				font-weight: bold;
				z-index: 1000;
			}

			.normal{
				top: 40px;
				color: #19be6b;
			}

			.warn{
				top: 110px;
				color: #ff9900;
			}

			.error{
				top: 180px;
				color: #fa3534;
			}
		</style>
	</head>
	<body>
		<div id='mapPage'>
			<div id='container'></div>
			<div class='normal conter'>正常：90</div>
			<div class='warn conter'>报警：90</div>
			<div class='error conter'>故障：90</div>
		</div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>

	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=jWPVaA2wOOclY0CHqiFLoCs6wcLoqRMn"></script>

	<!-- 引入jquery -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			$('.normal').click(function(){
				goDetailPage('normal');
			})

			$('.warn').click(function(){
				goDetailPage('warn');
			})

			$('.error').click(function(){
				goDetailPage('error');
			})

			// 跳转到列表详情页面
			function goDetailPage(type){
				uni.navigateTo({
					url: `/pages/alarmListDetail/alarmListDetail?type=${type}`
				})
			}





			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------

			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(113.567845, 34.824952); // 创建点坐标
			map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放


			var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);



			// 添加标注点
			var marker = new BMapGL.Marker(point); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			// 监听标注事件
			marker.addEventListener("click", function() {
				console.log("您点击了标注");
				// 跳转到厂区地图页面
				uni.navigateTo({
					url: '/pages/factoryMap/factoryMap'
				})
			});



			// 向地图中添加文本标注
			var content = "国家863软件园";
			var label = new BMapGL.Label(content, { // 创建文本标注
				position: point, // 设置标注的地理位置
				offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
			})
			// map.addOverlay(label); // 将标注添加到地图中
			// label.setStyle({ // 设置label的样式
			// 	color: '#000',
			// 	fontSize: '30px',
			// 	border: '2px solid #1E90FF'
			// })
			// 监听标注事件
			label.addEventListener("click", function() {
				alert("您点击了标注");
			});
		});
	</script>
</html>
